<template>
  <el-drawer with-header :visible.sync="open_studentlist" direction="rtl" size="35%" :show-close="false" :modal="false"
    :wrapperClosable="true" @close="closeDrawer" @open="openDrawer">
    <div v-show="showtype">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="ml30">
            <div class="grid-content bg-purple-dark    text-size-23-w700  ">学员补充结算</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="classflex-end mt10  ">
            <el-button @click="cancel" style="width: 100px;margin-right: 50px;">取消</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- {{queryParamsOrder}} -->
      <el-form class=" ml30 mr30" ref="queryParamsOrder" :model="queryParamsOrder" :rules="rules_student"
        label-width="80px" :inline="true" label-position="left">
        <el-divider style="width: 80%;"></el-divider>
        <el-form-item label="" prop="relationship">




          <el-form-item label="" prop="orderCourse">
            <!-- {{queryParamsOrder.orderCourse.courseName}} -->
            <el-select style="width: 300px;" v-model="queryParamsOrder.orderCourse" placeholder="请选择报名课程" filterable
              @change="refreshData">
              <el-option v-for="dict in courseList" :key="dict.id" :label="dict.courseName" :value="dict.courseName">
              </el-option>

            </el-select>


          </el-form-item>
        </el-form-item>


      </el-form>

      <!-- <el-alert title="本课程下在读学员，选择后，将自动关联本课程课时包。" type="warning"> -->
      </el-alert>
      <div class="   hovercolor stylecard mt10  ml20 mr20 " :class="selectedIndex1 == index ? 'changecolor':''"
        v-for="(item,index) in orderList" :key="item.orderId" @click="GetMessage(1,index,item.orderId)">

        <div class="classflex-space-between">
          <div class="classflex-left  mb20 pd10 mt10 ml10">

            <div>

              <img src="@/assets/touxiang.png" alt="">
            </div>
            <div class="ml20">
              <div class=" text-black text-size-20  " :class="selectedIndex1 == index ? 'text-green':''">
                {{item.orderStudentName}}
              </div>
              <div class="text-gray text-size-14  mt10">剩余{{item.residue}}课时</div>
            </div>
          </div>
          <div>
            <!-- {{item}} -->
            <el-button @click="addstudent( index,item)" style="width: 100px;margin-right: 50px;">补充结算</el-button>
          </div>
        </div>


      </div>

    </div>
    <!-- 添加或修改退费对话框 -->
    <el-dialog title="提示" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="ParamsClassrecords" :model="ParamsClassrecords" :rules="rules" label-width="80px">
        <el-form-item label="用户名称" prop="studentName">

          <el-input v-model="ParamsClassrecords.studentName" placeholder="请输入退费学员" style="width: 220px;" disabled />
        </el-form-item>
        <el-form-item label="用户状态" prop="attendanceState">
          <el-select v-model="ParamsClassrecords.attendanceState" placeholder="请选择" class="mr10" style="width: 220px;"
            @change="ChangeAttendanceState(ParamsClassrecords)">
            <el-option v-for="items in optionsclass" :key="items.value" :label="items.label" :value="items.value">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="扣课时数" prop="courseCancellations">
          <el-input-number v-model="ParamsClassrecords.courseCancellations" :min="1" :max="1000" label="描述文字"
            controls-position="right" style="width: 220px;">
          </el-input-number>

        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>
  </el-drawer>




</template>

<script>
  import {
    listStudent,
    getStudent,
    delStudent,
    addStudent,
    updateStudent
  } from "@/api/student/student";
  import {
    listUser,
    listUser2,
    getUser,
    delUser,
    addUser,
    updateUser,
    resetUserPwd,
    changeUserStatus,
    deptTreeSelect
  } from "@/api/system/user";
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder
  } from "@/api/order/order";
  import {
    listSchoolclass,
    getSchoolclass,
    delSchoolclass,
    addSchoolclass,
    updateSchoolclass
  } from "@/api/schoolclass/schoolclass";
  import {
    listClassrecords,
    getClassrecords,
    delClassrecords,
    addClassrecords,
    updateClassrecords
  } from "@/api/classrecords/classrecords";
  export default {
    name: 'SupplementStudentscheduingDrawer',
    dicts: ['sys_oper_type', 'student_relationship', 'student_state', 'student_sex', 'enrollment_channels',
      'student_grade'
    ],
    data() {
      return {
        nowform: {},
        rules: {
          attendanceState: [{
              required: true,
              trigger: "blur",
              message: "请选择状态"
            },

          ],
        },
        optionsclass: [{
          value: '到课',
          label: '到课'
        }, {
          value: '请假',
          label: '请假'
        }, {
          value: '未到',
          label: '未到'
        }],
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},


        rules_student: {
          userName: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 5,
              message: '长度在 1 到 5 个字符',
              trigger: 'blur'
            }
          ],
          relationship: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],


          phonenumber: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'change'
            },
            {
              min: 11,
              max: 12,
              message: '长度在 11 到 12 个字符',
              trigger: 'blur'
            }
          ],

        },
        form2: {},
        rules_student2: {
          userName: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          relationship: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'change'
          }],


          phonenumber: [{
              required: true,
              message: '请输入手机号码',
              trigger: 'change'
            },
            {
              min: 11,
              max: 12,
              message: '长度在 11 到 12 个字符',
              trigger: 'blur'
            }
          ],

        },
        type: false,
        open_studentlist: false,
        nowschedulingid: null,

        showtype: true,
        options: [],
        userList: [],
        orderList: [],
        studentList: [],
        queryParamsTeacher: {},
        selectedIndex1: 0,
        courseList: [],
        queryParamsCourse: {},
        queryParamsOrder: {},
        queryParamsSchoolclass: {},
        ParamsClassrecords: {},
        courseId: {}
      }
    },
    props: {

      title: {
        default: "",
        type: String,
      },


    },
    computed: {

    },
    watch: {

    },
    created() {


    },

    methods: {
      openDrawer(){
         console.log("打开事件");
         this.getCourseList1();
      },

      ChangeAttendanceState(item) {

      },
      submitForm() {
        this.addrecord();
      },
      cancelForm() {
        this.open = false;
      },
      open_studentlistdrawer(id, id2) {
        this.open_studentlist = true;
        this.nowschedulingid = id;
        this.courseId = id;
      },
      closeDrawer() {
        console.log("关闭事件");
        this.$emit('addClassrecords', 'addClassrecords'); // 触发名为'childEvent'的自定义事件，并传递数据
      },


      addstudent(index, item) {
        console.log(item.studentId);

        //学生ID
        this.ParamsClassrecords.studentId = item.studentId;
        //学生姓名
        this.ParamsClassrecords.studentName = item.orderStudentName;
        //机构ID
        this.ParamsClassrecords.deptId = this.$store.state.user.deptId;
        //排课ID
        this.ParamsClassrecords.scheduleId = this.nowschedulingid;

        this.ParamsClassrecords.courseId = this.nowschedulingid;

        this.ParamsClassrecords.studentName = item.orderStudentName;
        this.ParamsClassrecords.courseCancellations = "1";
        this.ParamsClassrecords.communicate_key = "1";

        this.open = true;

      },
      addrecord() {
        this.$refs["ParamsClassrecords"].validate(valid => {

          if (valid) {

            addClassrecords(this.ParamsClassrecords).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit('supplementClassrecords',
              'AddStudentlistDrawerSuccess'); // 触发名为'childEvent'的自定义事件，并传递数据
            });
          }

        })


      },

      refreshData(val) {
        this.$forceUpdate();
        this.getOrderList();

      },
      /** 查询订单列表 */
      getOrderList() {
        this.queryParamsOrder.deptId = this.$store.state.user.deptId;

        listOrder(this.queryParamsOrder).then(response => {
          this.orderList = this.handlerDatas(response.rows);
          console.log(  this.orderList);



        });
      },
      getCourseList1() {
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        listCourse(this.queryParamsCourse).then(response => {
          this.courseList = response.rows;
          this.queryParamsOrder.orderCourse = this.courseList[0].courseName;
          this.getOrderList();
        });
      },
      /** 查询课程管理列表 */
      getCourseList() {
        this.queryParamsCourse.deptId = this.$store.state.user.deptId;
        listCourse(this.queryParamsCourse).then(response => {
          this.courseList = response.rows;
          // this.queryParamsOrder.orderCourse= this.courseList[0].courseName;
          // this.getOrderList();
        });
      },
      /** 查询学生信息列表 */
      handlerDatas(arr) {
        const data = arr.map(function(item, index, arr) {
          const i = arr.find(_item => item.orderStudentName === _item.orderStudentName);
          if (i !== item) {
          var a=  parseInt(i.residue);
          var b=     parseInt(item.residue)
             // += item.residue
             i.residue=a+b
            return undefined;
          } else {
            return i;
          }
        }).filter(item => item !== undefined);
        return data
      },
      GetMessage(type, index, id) {

        this.selectedIndex1 = index;

      },
      search() {

      },
      // openstudentlist(classCourse, id) {

      //   //课程名称
      //   this.queryParamsOrder.orderCourse = classCourse;
      //   // //班级ID
      //   this.queryParamsSchoolclass.id = id;
      //   this.open_studentlist = true;
      //   this.getOrderList();
      //   this.getCourseList();
      // },



      // 取消按钮
      cancel() {
        this.open_studentlist = false;
        this.reset();
      },








      // 表单重置
      reset() {
        this.orderList = [];
        this.courseList = [];
        this.form = {
          id: null,
          studentId: null,
          userState: null,
          userName: null,
          sex: null,
          birthday: null,
          phonenumber: null,
          relationship: null,
          school: null,
          grade: null,
          address: null,
          enrollmentChannels: null,
          followUpPerson: null,
          userAccount: null,
          password: null,
          status: null,
          deptId: null,
          classId: null,
          delFlag: null,
          avatar: null,
          loginIp: null,
          loginDate: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          totalClassHours: null,
          remainingClassHours: null,
          accumulatedLearningHours: null,
          label: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },


    }





  }
</script>

<style lang="scss" scoped>
  .rightPanel-background {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
    background: rgba(0, 0, 0, .2);
    z-index: -1;
  }

  .rightPanel {
    width: 100%;
    max-width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
    transition: all .25s cubic-bezier(.7, .3, .1, 1);
    transform: translate(100%);
    background: #fff;
    z-index: 40000;
  }

  .handle-button {
    width: 48px;
    height: 48px;
    position: absolute;
    left: -48px;
    text-align: center;
    font-size: 24px;
    border-radius: 6px 0 0 6px !important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    line-height: 48px;

    i {
      font-size: 24px;
      line-height: 48px;
    }
  }
</style>
